<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 顶部按钮通栏 -->
        <div class="btn_wrapper">
          <span style="font-size: 12px; color: pink"
            >说明：目前支持学科和关键字条件筛选</span
          >

          <el-button
            class="btn"
            size="mini"
            @click="$router.push('new')"
            type="success"
          >
            <i class="el-icon-edit"></i>
            新增试题
          </el-button>
        </div>
        <!-- form 表单 -->
        <el-form ref="form" size="small" :model="form" label-width="80px">
          <!-- 表单第一行 -->
          <el-row>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="学科">
                  <el-select
                    v-model="form.subjectID"
                    placeholder="请选择"
                    style="width: 100%"
                    @change="changeBtn"
                  >
                    <el-option
                      v-for="item in disciplineList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="二级目录">
                  <el-select
                    v-model="form.catalogID"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in subject"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="标签">
                  <el-select
                    v-model="form.tags"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in contents"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="关键字">
                  <el-input v-model="form.keyword"></el-input>
                </el-form-item></div
            ></el-col>
          </el-row>
          <!-- 表单第二行 -->
          <el-row>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="试题类型">
                  <el-select
                    v-model="form.questionType"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option label="单选" value="1"></el-option>
                    <el-option label="多选" value="2"></el-option>
                    <el-option label="简单" value="3"></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="难度">
                  <el-select
                    v-model="form.difficulty"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option label="简单" value="1"></el-option>
                    <el-option label="一般" value="2"></el-option>
                    <el-option label="困难" value="3"></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="方向">
                  <el-select
                    v-model="form.direction"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="(item, index) in directionList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="录入人">
                  <el-select
                    v-model="form.creatorID"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in creatorList"
                      :key="item.id"
                      :label="item.username"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
          </el-row>
          <!-- 表单第三行 -->
          <el-row>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="题目备注">
                  <el-input v-model="form.remarks"></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="企业简称">
                  <el-input v-model="form.shortName"></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="城市">
                  <el-select
                    v-model="form.province"
                    placeholder="请选择"
                    style="width: 46%;display: inline-block;"
                    @change="cityChange"
                  >
                    <el-option
                      v-for="(item, index) in provincesList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                  <el-select
                    v-model="form.city"
                    placeholder="请选择"
                    style="width: 45%; margin-left: 5px;display: inline-block;"
                  >
                    <el-option
                      v-for="(item, index) in citysList"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div
                class="grid-content bg-purple-light"
                style="text-align: right"
              >
                <el-button size="small" @click="clear">清除</el-button>
                <el-button size="small" type="primary" @click="onSubmit"
                  >搜索</el-button
                >
              </div></el-col
            >
          </el-row>
        </el-form>
        <!-- tab栏 -->
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first"></el-tab-pane>
          <el-tab-pane label="待审核" name="second"></el-tab-pane>
          <el-tab-pane label="已审核" name="third"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
        </el-tabs>
        <!-- 数据总数 -->
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <i class="el-icon-info"></i>
              <span class="smallTitle">数据一共 {{ counts }} 条</span>
            </div></el-col
          >
        </el-row>
        <!-- 数据表格 -->
        <el-table
          :data="tableData"
          :header-cell-style="{ background: '#fafafa' }"
          style="width: 100%"
        >
          <el-table-column prop="number" label="试题编号" width="120">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column
            prop="questionType"
            :formatter="formatter"
            label="题型"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="question" label="题干" width="280">
            <template slot-scope="scope">
              <div v-html="scope.row.question"></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            :formatter="timer"
            label="录入时间"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="difficulty"
            :formatter="difficultyFormat"
            label="难度"
            width="80"
          >
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120">
          </el-table-column>
          <el-table-column
            prop="chkState"
            :formatter="chkTypeFn"
            label="审核状态"
            width="120"
          >
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="150">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120">
          </el-table-column>
          <el-table-column
            prop="publishState"
            :formatter="publishTypeFn"
            label="发布状态"
            width="150"
          >
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="detailsBomb(scope.row.id)">预览</el-button>
              <el-button
                size="mini"
                type="text"
                :disabled="scope.row.chkState === 0 ? false : true"
                @click="topicReview(scope.row.id)"
                >审核</el-button
              >
              <el-button size="mini" type="text" @click="$router.push('new?id='+scope.row.id)">修改</el-button>
              <el-button
              size="mini"
               type="text"

                @click="upperAndLowerShelvesFn(scope.row.id,scope.row.publishState)">{{scope.row.publishState === 0 ? '上架' : '下架' }}</el-button>
                 <!-- <el-button
              size="mini"
               type="text"
               v-else
                @click="erFn(scope.row.id,scope.row.publishState)">下架</el-button> -->
              <el-button size="mini" type="text" @click="deleteFn(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 弹出框 -->
        <el-dialog title="提示" :visible.sync="popup" width="30%">
          <el-radio v-model="radio" label="1" style="margin-right:50px;margin-bottom:20px;">通过</el-radio>
          <el-radio v-model="radio" label="2">拒绝</el-radio>
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="textarea"
          >
          </el-input>
          <span slot="footer" class="dialog-footer" style="display:flex;justify-content: right;">
            <el-button @click="popup = false">取 消</el-button>
            <el-button type="primary" @click=" bulletFrameDetermination">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 分页 -->
        <el-pagination
          class="Pagination"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[5, 10, 20, 50]"
          :total="counts"
          :page-size="query.size"
          layout="  prev, pager, next, sizes, jumper"
        >
        </el-pagination>
        <!-- 预览试题弹框 -->
        <el-dialog
          title="题目预览"
          v-if="dialogVisible"
          :visible.sync="dialogVisible"
          width="50%"
        >
          <questionsPreview :topicDetails="topicDetails"> </questionsPreview>

          <span slot="footer" class="dialog-footer">
            <div style="text-align: right">
              <el-button type="primary" @click="dialogVisible = false"
                >关 闭</el-button
              >
            </div>
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
// 导入请求数据列表
import { choice, detail, remove, choiceAdd, choiceCheck, choicePublish } from '@/api/hmmm/questions'
// 请求学科简单列表api
import { simple } from '@/api/hmmm/subjects'
// 二级下拉框 标签简单列表请求
import { simple as tags } from '@/api/hmmm/tags'
// 二级下拉框 目录简单列表
import { simple as catalogID } from '@/api/hmmm/directorys'
// 录入人下拉选框
import { simple as creatorID } from '@/api/base/users'
// 引入枚举数据
import {
  direction,
  questionType,
  difficulty,
  chkType,
  publishType
} from '@/api/hmmm/constants'
// 城市枚举数据
import { provinces, citys } from '@/api/hmmm/citys'
// 引入弹框组件
import questionsPreview from '@/module-hmmm/components/articles-preview'
// 引入day.js
import dayjs from 'dayjs'

export default {
  components: {
    questionsPreview
  },
  data () {
    return {

      auditId: 0, // 审核Id
      radio: '1', // 审核弹出框单选
      textarea: '', // 审核弹出框文本框
      popup: false, // 审核弹出框
      activeName: 'first', // tab栏
      query: {
        page: 1, // 页码
        pagesize: 10 // 每页条数
      },
      tableData: [], // 精选题库列表
      counts: 0, // 总数据数量
      disciplineList: [], // 学科下拉框列表
      contents: [], // 标签下拉列表数据
      subject: [], // 二级目录下拉列表
      optionValue: '', // 一级下拉框选中内容
      creatorList: [], // 录入人列表
      directionList: direction, // 赋值方向数据
      provincesList: [], // 所有城市
      citysList: [], // 县级列表
      dialogVisible: false, // 弹框是否显示
      topicDetails: {}, // 面试题详情
      form: {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签名称
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        city: '', // 城市
        province: '' // 企业所在省份
      }
    }
  },
  created () {
    // 请求精选题库列表方法
    this.choiceFn()
    // 调用学科下拉框列表
    this.simple()
    // 录入人下拉选框
    this.creatorID()
    this.provinces()
  },
  methods: {
    // 上下架
    async upperAndLowerShelvesFn (id, publishState) {
      // console.log(publishState)
      const shelfStatus = publishState === 1 ? '下架' : '上架'
      const all = await this.$confirm(
        '您确认' + shelfStatus + '这道题目吗?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      // 点击取消
      if (all === 'cancel') return this.$message('您点击了取消')
      const a = publishState === 1 ? 0 : 1
      await choicePublish({ publishState: a, id: id })
      this.$message.success(`${shelfStatus}成功`)

      // 刷新页面
      this.choiceFn()
    },

    // 精选删除
    async deleteFn (id) {
      const all = await this.$confirm(
        '此操作将永久删除该题, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)
      // 点击取消
      if (all === 'cancel') return this.$message('您点击了取消')

      // 点击确定
      await remove({ id: id })
      this.$message.success('删除成功')
      // 刷新页面
      this.choiceFn()
    },
    // 弹框确定
    async bulletFrameDetermination () {
      if (this.textarea !== '') {
        await choiceCheck({ id: this.auditId, chkRemarks: this.textarea, chkState: Number(this.radio) })
        this.popup = false
        this.$message.success('操作成功')
        this.choiceFn()
      } else {
        this.$message('请输入审核意见')
      }
    },
    // 题目审核
    topicReview (id) {
      this.popup = true
      this.auditId = id
    },
    // 加入精选题库按钮
    async addselection (id) {
      const confirm = await this.$confirm(
        '此操作将加入到精选题库, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)

      // 点击取消
      if (confirm === 'cancel') return this.$message('您点击了取消')

      // 点击确定
      await choiceAdd({ id: id, choiceState: 1 })
      this.$message.success('加入精选题库成功')
      // 刷新页面
      this.$router.push('choice')
    },

    // 格式化时间
    timer (row, column, cellValue, index) {
      // console.log(row)
      // console.log(column)
      // console.log(cellValue)
      // console.log(index)
      return dayjs(cellValue).format(' YYYY-MM-DD HH:mm:ss')
    },
    // 精品审核...
    chkTypeFn (row, column, cellValue, index) {
      // console.log(cellValue)
      const obj = chkType.find((item) => item.value === Number(cellValue))
      return obj.label
    },
    // 发布状态
    publishTypeFn (row, column, cellValue, index) {
      // console.log(cellValue)
      const obj = publishType.find((item) => item.value === Number(cellValue))
      return obj.label
    },
    // 枚举格式化难度数据
    difficultyFormat (row, column, cellValue, index) {
      const obj = difficulty.find((item) => item.value === Number(cellValue))
      return obj.label
    },
    // 枚举格式化题型数据
    formatter (row, column, cellValue, index) {
      const obj = questionType.find((item) => item.value === Number(cellValue))
      return obj.label
    },

    // 题目详情按钮事件
    async detailsBomb (id) {
      const res = await detail({ id: id })
      // console.log(res)
      this.topicDetails = res.data
      this.dialogVisible = true
    },

    // 搜索按钮
    async onSubmit () {
      const res = await choice({ ...this.form, ...this.query })
      // console.log(res)
      this.tableData = res.data.items
      this.counts = res.data.counts
    },

    // 清除按钮事件
    clear () {
      this.form = {
        subjectID: '', // 学科
        catalogID: '', // 二级目录
        tags: '', // 标签名称
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        city: '', // 城市
        province: '' // 企业所在省份
      }
    },

    // 城市一级下拉栏的改变事件
    async cityChange () {
      const res = await citys(this.form.province)
      this.citysList = res
    },

    // 调用城市方法
    async provinces () {
      const res = await provinces()
      this.provincesList = res
    },
    // 录入人下拉选框
    async creatorID () {
      const res = await creatorID()
      this.creatorList = res.data
    },
    // 一级下拉框change事件
    async changeBtn () {
      const resr = await catalogID({ subjectID: this.form.subjectID })
      const res = await tags({ subjectID: this.form.subjectID })
      this.contents = res.data
      this.subject = resr.data
    },
    // 请求学科下拉框简单列表
    async simple () {
      const res = await simple()
      this.disciplineList = res.data
    },

    // 请求精选题库列表方法
    async choiceFn () {
      const res = await choice({ ...this.query })
      console.log(res)
      this.tableData = res.data.items
      this.counts = res.data.counts
      console.log(res.data.items.publishState)
    },

    // 每页显示的条数发生改变时触发
    handleSizeChange (val) {
      this.query.pagesize = val
      this.choiceFn()
    },

    // 当页码发生改变时触发
    handleCurrentChange (val) {
      this.query.page = val
      this.choiceFn()
    },
    // tab栏方法
    async handleClick (tab, event) {
      // console.log(tab)
      // console.log(event)
      // console.log(this.activeName)
      if (this.activeName === 'first') {
        this.choiceFn()
        // console.log(11)
      } else if (this.activeName === 'second') {
        const res = await choice({ ...this.query, chkState: 0 })
        // console.log(res)
        this.tableData = res.data.items
        this.counts = res.data.counts
      } else if (this.activeName === 'third') {
        const res = await choice({ ...this.query, chkState: 1 })
        // console.log(res)
        this.tableData = res.data.items
        this.counts = res.data.counts
        // console.log(33)
      } else {
        const res = await choice({ ...this.query, chkState: 2 })
        // console.log(res)
        this.tableData = res.data.items
        this.counts = res.data.counts
        // console.log(44)
      }
    }
  }
}
</script>

<style scoped>
.Pagination {
  margin-top: 20px;
  text-align: right;
}
.el-button--warning {
  color: #e6a23c;
  background: #fdf6ec;
  border-color: #f5dab1;
}
.el-button--danger {
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
}
.el-button--succes1 {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
}
.is-plain {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}

.btn_wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.bg-purple-dark {
  background: #f4f4f5;
}

.el-icon-info {
  margin: 0 5px 0 15px;
}
.grid-content {
  line-height: 36px;
  color: #909399;
  margin: 1px 0 15px 0;
  border-radius: 4px;
  min-height: 36px;
}
.smallTitle {
  font-size: 13px;
}
</style>
